<!-- subpkg_consult/room/components/message-info.vue -->
<script lang="ts" setup>
// 接收外部传入的数据
import { useUserStore } from '@/stores/user'
import type { MsgItem } from '@/types/room'
import dayjs from 'dayjs';

defineProps<{
  info: MsgItem
  type: number
}>()


// 格式化时间
const formatTime = (time: string) => {
  // hour:小时
  // minute:分
  // second:秒
  return dayjs(time).format('hh:mm:ss')
}


const store = useUserStore()
</script>

<template>
  <!-- 文字/图片消息 
    添加了 reverse 右侧信息
    没有 reverse 左侧信息
     如果是当前用户的信息，那么需要添加  reverse类名，放在右边
    from 发件人 和当前用户 id 比较 相同 说明是自己，添加类名实现高亮即可
    -->
    <view class="message-item" :class="{ reverse: info.from == store.userId }">
    <!-- {{ info }} -->
       <!-- {{ store.userId }} -->
    <image class="room-avatar" :src="info.fromAvatar" />
    <view class="room-message">
       <!-- 默认不需要渲染年月日，只渲染时分秒即可 -->
       <view class="time">{{ formatTime(info.createTime) }}</view>
      <!-- 1 是文字信息 -->
      <view v-if="type == 1" class="text"> {{ info.msg?.content }}</view>
      <!-- 4 是图片信息 根据不同的信息进行渲染 -->
      <image v-if="type == 4" class="image" :src="info.msg?.picture?.url" mode="widthFix" />
    </view>
  </view>
</template>

<style lang="scss">
.message-item {
  display: flex;
  align-self: flex-start;
  margin-top: 60rpx;

  .room-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .room-message {
    margin-left: 20rpx;
  }

  .time {
    font-size: 26rpx;
    color: #979797;
  }

  .image {
    max-width: 420rpx;
    margin-top: 10rpx;
  }

  .text {
    max-width: 420rpx;
    line-height: 1.75;
    padding: 30rpx 40rpx;
    margin-top: 16rpx;
    border-radius: 20rpx;
    font-size: 30rpx;
    color: #3c3e42;
    background-color: #fff;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: -25rpx;
      width: 26rpx;
      height: 52rpx;
      background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);
      background-size: contain;
    }
  }

  &.reverse {
    flex-direction: row-reverse;
    align-self: flex-end;

    .room-message {
      margin-left: 0;
      margin-right: 20rpx;
    }

    .time {
      text-align: right;
    }

    .text {
      background-color: #16c2a3;
      color: #fff;

      &::after {
        left: auto;
        right: -25rpx;
        background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);
      }
    }
  }
}
</style>
